<template>
  <!-- 员工管理页 -->
  <div class="staff">
    <!-- 头部区域 -->
    <div class="header">
      <el-date-picker
        v-model="selectDate"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
      <el-select v-model="value1" placeholder="请选择类型" clearable>
        <el-option label="提现" value="提现"></el-option>
        <el-option label="收益" value="收益"></el-option>
      </el-select>
      <el-select v-model="value2" placeholder="请选择状态" clearable>
        <el-option label="正常" value="正常"></el-option>
        <el-option label="未审核" value="未审核"></el-option>
      </el-select>
      <el-autocomplete
        class="inline-input"
        v-model="value3"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        clearable
      ></el-autocomplete>
      <el-button type="primary" @click="queryStaffAccount">查询</el-button>
    </div>
    <!-- 表格内容展示区 -->
    <div class="table_content">
      <el-table :data="StaffData" border style="width: 100%">
        <!-- 编号 -->
        <el-table-column prop="id" label="编号" align="center">
        </el-table-column>
        <!-- 交易金额 -->
        <el-table-column prop="transferMoney" label="交易金额" align="center">
        </el-table-column>
        <!-- 交易时间 -->
        <el-table-column prop="transferTime" label="交易时间" align="center">
        </el-table-column>
        <!-- 交易类型 -->
        <el-table-column prop="type" label="账务类型" align="center">
        </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '未审核' ? 'danger' : 'success'"
              disable-transitions
              >{{ scope.row.status }}</el-tag
            >
          </template>
        </el-table-column>
        <!-- 描述 -->
        <el-table-column prop="description" label="描述" align="center">
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页区域 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="staffTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import moment from "moment";
export default {
  data() {
    return {
      //全部数据
      StaffData: [],
      currentPage: 1,
      pageSize: 8,
      staffTotal: 8,
      //类型
      value1: "",
      // 状态
      value2: "",
      // 编号
      value3: "",
      AccountData: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              let end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              let end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              let end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      selectDate: [],
      StartTime: "",
      EndTime: "",
    };
  },
  computed: {},
  methods: {
    async getAllStaffData() {
      let data = {
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      let res = await get("/account/pageQueryEmployeeAccount", {
        ...data,
        ...this.AccountData,
      });
      //时间戳转日期
      for (let item of res.data.list) {
        item.transferTime = this.turnTime(item.transferTime);
      }
      this.StaffData = res.data.list;
      this.staffTotal = res.data.total;
    },
    //获取所有员工编号
    async getAlluserIdData() {
      let data = {
        page: 1,
        pageSize: 100,
      };
      let res = await get("/account/pageQueryEmployeeAccount", data);
      this.userIdData = res.data.list;
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    loadAll() {
      return [
        { value: "25" },
        { value: "81" },
        { value: "82" },
        { value: "87" },
      ];
    },

    getTimestamp(time) {
      //把时间日期转成时间戳 方法
      return new Date(time).getTime();
    },
    turnTime(date) {
      //把时间戳转成时间日期 方法
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    //查询账单
    queryStaffAccount() {
      this.StartTime = this.getTimestamp(this.selectDate[0]);
      this.EndTime = this.getTimestamp(this.selectDate[1]);
      let data = {
        type: this.value1,
        status: this.value2,
        userId: this.value3,
        beginTime: this.StartTime,
        endTime: this.EndTime,
      };
      for (let key in data) {
        if (!data[key]) {
          delete data[key];
        }
      }
      this.AccountData = data;
      this.currentPage = 1;
      this.getAllStaffData();
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
      this.getAllStaffData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getAllStaffData();
    },
  },

  created() {
    this.getAllStaffData();
    this.getAlluserIdData();
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
};
</script>
<style scoped>
.pagination {
  position: fixed;
  bottom: 40px;
  right: 10px;
}
</style>